<template>
  <div>
    <!-- 留言内容 -->
    <div>
      <!-- 留言通过props传递 -->
      <slot name="default" :model="model">{{ model }}</slot>
    </div>

    <!-- 删除按钮，触发父组件的删除事件 -->
    <button @click="delly">删除留言</button>
  </div>
</template>

<script setup lang="ts">
const model = defineModel()
const emit = defineEmits(['del'])
const delly = () => {
  emit('del', model)
}
</script>

<style lang="scss" scoped>
div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  background-color: #dc3545;
}

button:hover {
  background-color: #c82333;
}
</style>
